<template>
  <div>
    <div class="head"><img src="../../../static/images/banner1.jpg"></div>
    <i-panel>
    <view class="filetitle">营业执照</view>
      <i-row>
        <i-col
          span="15"
          i-class="col-class"
        >
          <div class="j-pic-upload">
            <div  v-if="is_show1"
              class="j-upload-btn"
              @click="uploadImg(1)"
              :style="{'width':width || '100rpx','height':height || '100rpx'}"
            >
              <span class="j-upload-add">+</span>
            </div>
            <img
              @click="previewImg(index,1)"
              v-for="(src,index) in urls1"
              :key="src"
              :src="src"
              :style="{'width':width || '210rpx','height':height || '297rpx'}"
              class="img"
            >

          </div>
        </i-col>
        <i-col
          span="9"
          i-class="col-class"
        >
          <div class="intro">
            <h3>简要说明</h3>
            <p>1.上传图片不超过5M</p>
          </div>
        </i-col>
      </i-row>

    </i-panel>
    <i-panel>
        <view class="filetitle">经办人身份证</view>

      <i-row>
        <i-col
          span="15"
          i-class="col-class"
        ><div class="j-pic-upload">
            <div v-if="is_show2"
              class="j-upload-btn"
              @click="uploadImg(2)"
              :style="{'width':width || '100rpx','height':height || '100rpx'}"
            >
              <span class="j-upload-add">+</span>
            </div>
            <img
              @click="previewImg(index,2)"
              v-for="(src,index) in urls2"
              :key="src"
              :src="src"
              :style="{'width':width || '210rpx','height':height || '297rpx'}"
              class="img"
            >
          </div>
          
        </i-col>
        <i-col
          span="9"
          i-class="col-class"
        >
          <div class="intro">
            <h3>简要说明</h3>
            <p>1.上传图片不超过5M</p>
            <p>2.请上传身份证正反照片</p>
          </div>
        </i-col>
      </i-row>

    </i-panel>
    <i-panel>
            <view class="filetitle">授权委托书</view>

      <i-row>
        <i-col
          span="15"
          i-class="col-class"
        >
          <div class="j-pic-upload">
            <div  v-if="is_show4"
              class="j-upload-btn"
              @click="uploadImg(4)"
              :style="{'width':width || '100rpx','height':height || '100rpx'}"
            >
              <span class="j-upload-add">+</span>
            </div>
            <img
              @click="previewImg(index,4)"
              v-for="(src,index) in urls4"
              :key="src"
              :src="src"
              :style="{'width':width || '210rpx','height':height || '297rpx'}"
              class="img"
              >
          </div>
        </i-col>
        <i-col
          span="9"
          i-class="col-class"
        >
          <div class="intro">
            <h3>简要说明</h3>
            <p>1.上传图片不超过5M</p>
          </div>
        </i-col>
      </i-row>

    </i-panel>
    <i-button
      @click="submit()"
      type="success"
    >提交审核</i-button>

  </div>
</template>

<script>
import "mpvue-weui/src/style/weui.css";
import {postRequest} from '@/utils/http'
export default {
  props: ["width", "height", "max", "srcs1", "srcs2",  "srcs4","base641","base642","base644","pic4"],
  data() {
    return {
      urls1: [],//营业执照
      urls2: [],//经办人身份证
      urls4: [],//授权委托书
      backobj:"",
      is_show1:true,
      is_show2:true,
      is_show4:true,
      urls5:"",
      pic1:'',
      pic2:'',
      pic4:''
    };
  },
  mounted() {
    this.urls1 = this.srcs1 || [];
    this.urls2 = this.srcs2 || [];
    this.urls4 = this.srcs4 || [];
    // this.srcs1 = this.CompanyInfo.IMG_LIST[0].IMG_BASE64  || [];
    // this.srcs2 = this.CompanyInfo.IMG_LIST[1].IMG_BASE64  || [];
    // this.srcs4 = this.CompanyInfo.IMG_LIST[2].IMG_BASE64  || [];
  },

  methods: {
    uploadImg(num) {
       let that = this;
      if (num == 1) {
        var nn = that.urls1;
      } else if (num == 2) {
        var nn = that.urls2;
      
      } else if (num == 4) {
        var nn = that.urls4;
     
      }
      if (nn.length == 0) {
        this.loadImage(num);
      } else {
        this.showMsg("一");
      }
    },
   async uploadserver(base,num){
       let params = {
         'BASE64_STR':base
       };
      const info = await postRequest('/uploadImage/v0',params);
      const result = info.UNI_BSS_BODY;
       if(result.RSP.CODE == "0000"){
          console.log(result);
          var IMG_URL = result.RSP.DATA.IMG_URL;
          console.log(IMG_URL);
          switch(num){
            case 1:
              this.srcs1=IMG_URL;
              console.log('图一'+this.srcs1);
              break;
              case 2:
              this.srcs2=IMG_URL;
               console.log('图二'+this.srcs2);
              break;
              case 4:
                this.srcs4=IMG_URL;
                 console.log('图三'+this.srcs4);
            break;
          }
       }    
    },
    loadImage(num) {
      let that = this;
       wx.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: res => {
          switch (num){
            case 1: 
              this.is_show1=false;
              break;
            case 2:
              this.is_show2=false;
              break;
            case 4:
              this.is_show4=false;
              break;
          }
          console.log(res);
          var tempFilesSize = res.tempFiles[0].size; //获取图片的大小，单位B
          if (tempFilesSize <= 5000000) {
             if (num == 1) {
             wx.getFileSystemManager().readFile({
             filePath: res.tempFilePaths[0], //选择图片返回的相对路径
             encoding: 'base64', //编码格式
             success: res => { //成功的回调
              that.base641 ='data:image/png;base64,'+ res.data;
              this.uploadserver(that.base641,num);
             }
             })
            var imgnum = that.urls1;
             }
             else if(num == 2){
              wx.getFileSystemManager().readFile({
             filePath: res.tempFilePaths[0], //选择图片返回的相对路径
             encoding: 'base64', //编码格式
             success: res => { //成功的回调
             that.base642 = 'data:image/png;base64,'+res.data;
             this.uploadserver(that.base642,num);
             }
              })
            var imgnum = that.urls2;
             }else if(num == 4){

                wx.getFileSystemManager().readFile({
             filePath: res.tempFilePaths[0], //选择图片返回的相对路径
             encoding: 'base64', //编码格式
             success: res => { //成功的回调
             that.base644 = 'data:image/png;base64,'+res.data;
             this.uploadserver(that.base644,num);
             }
            })
              var imgnum = that.urls4;
          }
            res.tempFilePaths.forEach(v => {
              imgnum.push(v);
              console.log(imgnum);
            });
            // that.$emit("choosed", {
            //   all: imgnum,
            //   currentUpload: res.tempFilePaths
            // });
            // that.imgRotate(res.tempFilePaths[0]);
          } else {
            wx.showToast({
              title: "上传图片不能大于5M!", //标题
              icon: "none"
            });
          }
        }
      });
    },
          
    showMsg(str) {
      wx.showToast({
        title: "只能上传" + str + "张图片", //标题
        icon: "none"
      });
    },

    previewImg(index, num) {
      let that = this;
      wx.showActionSheet({
        itemList: ["预览", "删除"],
        success: function(res) {
          if (res.tapIndex === 0) {
            console.log(res.tapIndex);
            if (num == 1) {
              var imgnum = that.urls1;
            } else if (num == 2) {
              var imgnum = that.urls2;
            } else if (num == 4) {
              var imgnum = that.urls4;
            }
            wx.previewImage({
              current: imgnum[index],
              urls: imgnum
            });
          } else {
            imgnum.splice(index, 1);
            that.$emit("delete", imgnum);
          }
        }
      });
    },

    imgRotate(path) {
      var canvas = wx.createContext();
      canvas.translate(250, 0);
      canvas.rotate(90 * Math.PI / 180);
      canvas.drawImage(path, 0, 0, 250, 250);
      wx.drawCanvas({
        canvasId: "canvas",
        actions: canvas.getActions()
      });
    },


   async submit(){//提交到服务器
       let infomation = JSON.parse(wx.getStorageSync('info'));//获取登录接口返回信息
      let params ={
        'ACT_TYPE':this.backobj.code,
        'CREATE_UNIFIED_ACCT_ID':infomation.UNIFIED_ACCT_ID,
        'UNIFIED_ACCT_NUMBER':infomation.UNIFIED_ACCT_NUMBER,
        'PHONE':infomation.PHONE,
        'UNIFIED_ACCT_ID':infomation.UNIFIED_ACCT_ID,
        'OPERATOR_ID':infomation.UNIFIED_ACCT_ID,
        'COMPANY_CERT_TYPE':'1',
        'COMPANY_CERT_NUM':this.backobj.COMPANY_CERT_NUM,
        'COMPANY_NAME':this.backobj.COMPANY_NAME,
        'ATTN_NAME':this.backobj.ATTN_NAME,
        'ATTN_CERT_TYPE':this.backobj.ATTN_CERT_TYPE,
        'ATTN_CERT_NUM':this.backobj.ATTN_CERT_NUM,
        'ATTN_CERT_ADDR':this.backobj.ATTN_CERT_ADDR,
        'ATTN_PHONE':this.backobj.ATTN_PHONE,
        'COMPANY_ADDR':this.backobj.COMPANY_ADDR,
        'IMG_LIST':[
          {'IMG_URL':'',
          'IMG_TYPE':'1'},
           {'IMG_URL':'',
          'IMG_TYPE':'2'},
           {'IMG_URL': '',
          'IMG_TYPE':'3'}
          ],
        'COMPANY_PROVINCE_CODE':'010'
};
      const info = await postRequest('/submitUnifiedAcctCompany/v0',params);
      const result = info.UNI_BSS_BODY;
      console.log(result);
      if(result.RSP.CODE == "0000"){
        wx.showToast({
        title: result.RSP.MESSAGE, //标题
        icon: "none",
        duration: 2000
      });
       setTimeout(
          wx.switchTab(
          {
            url: '../myinfo/main'
          })
        ,5000)
      }
      else{
        wx.showToast({
        title: result.RSP.MESSAGE, //标题
        icon: "none",
        duration: 2000
      });
       setTimeout(
         wx.switchTab(
          {
            url: '../myinfo/main'
          })
        ,5000)
        }
       }
  },
  onLoad: function(options) {
    let that = this;
     wx.showLoading({
        title: '数据加载中',
        })
    var obj = JSON.parse(options.info);
    that.backobj =obj;
    // that.CompanyInfo = wx.getStorageSync("CompanyInfo");
     setTimeout(function(){
        wx.hideLoading()
      },500)
  }
};
</script>

<style lang="scss" scoped>
.head {
  img {
    width: 100%;
    height: 150px;
  }
}
.filetitle {
  font-size: 35rpx;
  font-weight: bold;
  
  margin: 5px 10px;
}
.j-pic-upload {
  padding: 10rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}
.j-upload-btn {
  border: 1px dashed #ddd;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-right: 20rpx;
}
.j-upload-add {
  font-size: 80rpx;
  font-weight: 500;
  color: #c9c9c9;
}
.img {
  margin: 10rpx 20rpx 10rpx 0;
}
.intro {
  font-size: 15px;
  font-weight: 100
}
</style>
